/* eslint-disable react/jsx-handler-names */
/* eslint-disable react/no-array-index-key */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input, Select, Form } from 'antd';
import styles from './styles.less';
import { taskType, taskTypeObj } from './commonFunc';
import { PrimaryC } from '@/src/components';

const FormItemLayout = {
  labelCol: {
    xs: { span: 4, offset: 0 },
    sm: { span: 8, offset: 0 },
    md: { span: 8, offset: 0 },
    lg: { span: 8, offset: 0 },
    xl: { span: 7, offset: 0 },
    xxl: { span: 7, offset: 0 },
  },
  wrapperCol: {
    xs: { span: 18, offset: 0 },
    sm: { span: 14, offset: 0 },
    md: { span: 14, offset: 0 },
    lg: { span: 14, offset: 0 },
    xl: { span: 15, offset: 0 },
    xxl: { span: 15, offset: 0 },
  },
};
class UserTaskPannel extends Component {
  // 默认值
  static defaultProps = {
    id: undefined, // 节点ID
    name: undefined, // 节点名称
    taskType: undefined, // 任务类型
    station: undefined, // 岗位
    user: undefined, // 用户
    nameChanged: () => {}, // 名字变更事件
    taskTypeChanged: () => {}, // 任务类型变更事件
    stationChanged: () => {}, // 岗位变更事件
    userChanged: () => {}, // 用户变更事件
    mode: 'view', // 默认查看模式
    saveUserTask: () => {}, // 保存设置事件
  };

  constructor(props) {
    super(props);

    const { name, taskType, station, user } = props;
    this.state = {
      name, // 节点名称
      taskType, // 任务类型
      station, // 岗位
      user, // 用户
    };
  }

  formRef = React.createRef();

  componentDidMount() {
    this.formRef.current.setFieldsValue({
      id: this.props.id, // 节点ID
      name: this.props.name, // 节点名称
      taskType: this.props.taskType, // 任务类型
      station: this.props.station, // 岗位
      user: this.props.user, // 用户
    });
  }

  componentDidUpdate(preProps) {
    if (this.props.id !== preProps.id) {
      this.formRef.current.setFieldsValue({ id: this.props.id });
    }
    if (this.props.name !== preProps.name) {
      this.formRef.current.setFieldsValue({ name: this.props.name });
    }
    if (this.props.taskType !== preProps.taskType) {
      this.formRef.current.setFieldsValue({ taskType: this.props.taskType });
      this.setState({ taskType: this.props.taskType });
    }
    if (this.props.station !== preProps.station) {
      this.formRef.current.setFieldsValue({ station: this.props.station });
    }
    if (this.props.user !== preProps.user) {
      this.formRef.current.setFieldsValue({ user: this.props.user });
    }
  }

  // 响应任务类型变更
  taskTypeChanged = (e) => {
    this.setState({ taskType: e });

    this.props.taskTypeChanged(e);
  };

  // 点击保存设置
  handleSubmit = async () => {
    const { taskType } = this.state;
    // 因为页面有多个 所以这里表单无法成功 进入到失败
    let tempArr = [];
    // 多人抢占、多人并发、多人顺序必填项设置
    if (taskType === taskTypeObj.seize || taskType === taskTypeObj.concurrent || taskType === taskTypeObj.order) {
      tempArr = ['id', 'name', 'taskType', 'station'];
    }
    // 单人审批必填项设置
    if (taskType === taskTypeObj.single) {
      tempArr = ['id', 'name', 'taskType', 'user'];
    }
    // 发起人必填项设置
    if (taskType === taskTypeObj.sponsor) {
      tempArr = ['id', 'name', 'taskType'];
    }
    const values = await this.formRef.current.validateFields(tempArr);
    if (values) {
      // 抛出保存设置事件
      this.props.saveUserTask(values);
    }
  };

  render() {
    const { nameChanged, stationChanged, userChanged, mode, userList, stationList } = this.props;
    return (
      <div className={`${styles.SequenceFlowPannel}`}>
        <div>配置项设置</div>
        <Form ref={this.formRef}>
          <Form.Item label='编号' name={'id'} {...FormItemLayout} className={'formCls1'}>
            <Input disabled={true} />
          </Form.Item>
          <Form.Item label='名称' name='name' rules={[{ required: true, message: '名称不能为空!' }]} {...FormItemLayout} className={'formCls1'}>
            <Input disabled={mode === 'view'} onChange={nameChanged} maxLength={20} />
          </Form.Item>
          <Form.Item label='类型' name='taskType' rules={[{ required: true, message: '类型不能为空!' }]} {...FormItemLayout} className={'formCls1'}>
            <Select getPopupContainer={(triggerNode) => triggerNode.parentNode} onChange={this.taskTypeChanged} disabled={mode === 'view'}>
              {taskType.map((item) => (
                <Select.Option value={item.value} key={item.value}>
                  {item.title}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            name='station'
            label='岗位'
            rules={[{ required: true, message: '岗位不能为空!' }]}
            {...FormItemLayout}
            style={{
              display:
                this.state.taskType == taskTypeObj.seize || this.state.taskType == taskTypeObj.concurrent || this.state.taskType == taskTypeObj.order ? 'inline-block' : 'none',
            }}
            className={'formCls1'}
          >
            <Select getPopupContainer={(triggerNode) => triggerNode.parentNode} onChange={stationChanged} disabled={mode === 'view'}>
              {
                // 岗位改为岗位 字段不改变 传参的时候根据后端要求拼接为 station+岗位id
                stationList &&
                  stationList.map((item, index) => {
                    return (
                      <Select.Option key={index} value={item.value} title={item.title}>
                        {item.title}
                      </Select.Option>
                    );
                  })
              }
            </Select>
          </Form.Item>
          <Form.Item
            label='用户'
            name='user'
            rules={[{ required: true, message: '用户不能为空!' }]}
            {...FormItemLayout}
            className={'formCls1'}
            style={{ display: this.state.taskType == taskTypeObj.single ? 'inline-block' : 'none' }}
          >
            <Select
              getPopupContainer={(triggerNode) => triggerNode.parentNode}
              onChange={userChanged}
              disabled={mode === 'view'}
              showSearch={true}
              optionFilterProp='children' // 查询label
              filterOption={(
                input,
                option, // 模糊搜索value 和 label
              ) => {
                return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 || option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
              }}
            >
              {userList &&
                userList.map((item, index) => {
                  return (
                    <Select.Option key={index} value={item.value} title={item.title}>
                      {item.title}
                    </Select.Option>
                  );
                })}
            </Select>
          </Form.Item>
          {mode === 'view' ? null : (
            <Form.Item className={'saveClass'}>
              <PrimaryC title='保存设置' onClick={this.handleSubmit} />
            </Form.Item>
          )}
        </Form>
      </div>
    );
  }
}
// props默认值
UserTaskPannel.propsTypes = {
  id: PropTypes.string, // 节点ID
  name: PropTypes.string, // 节点名称
  taskType: PropTypes.string, // 任务类型
  station: PropTypes.string, // 岗位
  user: PropTypes.string, // 用户
  nameChanged: PropTypes.func, // 名字变更事件
  taskTypeChanged: PropTypes.func, // 任务类型变更事件
  stationChanged: PropTypes.func, // 岗位变更事件
  userChanged: PropTypes.func, // 用户变更事件
  mode: PropTypes.string, // 模式（view-不可编辑，editor-可编辑）
  saveUserTask: PropTypes.func, // 保存设置事件
};

export default UserTaskPannel;
